<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>登录</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="/ui/assets/css/amazeui.min.css"/>
  <style>
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 200%;
      color: #333;
    }
    .header p {
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="header">
  <div class="am-g">
  	<div class="am-u-12">
  		<h1>登录</h1>
  	</div>
  	<div class="am-u-12">
  		<img alt="" src="/ui/logo.jpg" width="92">
  	</div>
  	<div class="am-u-12">
	    <p>日新自强，知行合一</p>
    </div>
  </div>
  <hr />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
    <form method="post" class="am-form" autocomplete="off">
      <label for="user">学号:</label>
      <input type="text" name="user" id="user" value="">
      <br>
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" value="">
      <br>
      <div class="am-cf">
        <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl">
        <input type="button" name="" id="off" value="离线模式" class="am-btn am-btn-success am-btn-sm am-fl">
        <input type="button" name="" id="hybrid" value="混合模式" class="am-btn am-btn-warning am-btn-sm am-fl">
      </div>
    </form>
    <hr>
  </div>
</div>

<div class="am-g am-margin-top">
	<div class="am-u-12">
		<div class="am-alert am-alert-primary" data-am-alert>
			1、离线模式：使用的是上次数据缓存，由于没登录获取新数据时候可能出错。
			<br>
			2、混合模式：学校、班级等基础数据尽量使用缓存，节省流量，加快响应速度。
		</div>
	</div>
</div>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="loading">
  <div class="am-modal-dialog">
    <div id="modal-loading-msg" class="am-modal-hd">登录中...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>



<div class="am-modal am-modal-confirm" tabindex="-1" id="alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd" id="alert-msg">
    	登录失败。
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

</body>
<script src="/ui/assets/js/jquery.min.js"></script>
<script src="/ui/assets/js/amazeui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("form").bind("submit",function(){
			
			$.ajax({
				url:'/doLogin',
				data:$("form").serializeArray(),
				dataType:'json',
				type:'POST',
				success:function(data){
					if(data.err != "0"){
						$("#alert").modal();
					}
					else{
						location.href = "/home.html";
					}
				},
				error:function(){
					$("#alert").modal();
				},
				beforeSend:function(){
					$("#loading").modal();
				},
				complete:function(){
					$("#loading").modal("close");
				}
			});
			return false;
		});
		
		$("#off").bind("click",function(){
			$.ajax({
				url:'/doOffLogin',
				data:$("form").serializeArray(),
				dataType:'json',
				type:'POST',
				success:function(data){
					if(data.err != "0"){
						$("#alert").modal();
					}
					else{
						location.href = "/home.html";
					}
				},
				error:function(){
					$("#alert").modal();
				},
				beforeSend:function(){
					$("#loading").modal();
				},
				complete:function(){
					$("#loading").modal("close");
				}
			});
		});
		
		$("#hybrid").bind("click",function(){
			$.ajax({
				url:'/doHybridLogin',
				data:$("form").serializeArray(),
				dataType:'json',
				type:'POST',
				success:function(data){
					if(data.err != "0"){
						$("#alert").modal();
					}
					else{
						location.href = "/home.html";
					}
				},
				error:function(){
					$("#alert").modal();
				},
				beforeSend:function(){
					$("#loading").modal();
				},
				complete:function(){
					$("#loading").modal("close");
				}
			});
		});
		
	}); 	
</script>

</html>